<template>
  <van-nav-bar
    :title="brand"
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
  >
  </van-nav-bar>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(item, index) in dataList" :key="index"
      ><img :src="item" class="swipimg" />
    </van-swipe-item>
  </van-swipe>

  <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
    <div class="goods-list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="goods-item"
      >
        <van-cell
          v-for="item in productList"
          :key="item.proid"
          @click="goToDetail(item.proid)"
          size="large"
        >
          <div class="item-imgbox">
            <img :src="item.img1" alt="" />
          </div>
          <div>
            <p>{{ item.proname }}</p>
            <p>{{ item.originprice }}</p>
          </div>
        </van-cell>
      </van-list>
    </div>
  </van-pull-refresh>
</template>

<script setup lang="ts">
import { getCategoryBrandproList, getProList } from "@/api/api";
import axios from "axios";
import { ref, onMounted } from "vue";
import type { Ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const category: Ref<string> = ref("");
const brand: Ref<string> = ref("");
const route = useRoute();
const dataList: Ref<string[]> = ref([]);
interface Tres {
  code: string;
  data: Array<object>;
  message?: string;
}
const router = useRouter();

const gridList: Ref<any[]> = ref([]);
const loading: Ref<boolean> = ref(false);
const finished: Ref<boolean> = ref(false);
const refreshLoading = ref(false);
const count: Ref<number> = ref(1);
const productList: Ref<any[]> = ref([]);
const APIGetproList = async () => {
  const res: any = await getProList({
    count: count.value,
  });
  if (res.code === "200") {
    productList.value = res.data;
  }
};

const onRefresh = () => {
  count.value = 1;
  productList.value = [];
  APIGetproList();
  refreshLoading.value = false;
};
const onLoad = () => {
  loading.value = true;
  count.value += 1;
  getProList({ count: count.value }).then((res) => {
    loading.value = false;
    if (res.data.length === 0) {
      finished.value = false;
      return false;
    }
    productList.value = productList.value.concat(res.data);
  });
};
const goToDetail = (id: string) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};

onMounted(async () => {
  const res1 = (await axios.get("/api/banner/list")).data as any;
  category.value = route.query.category as string;
  brand.value = route.query.brand as string;
  const res = await getCategoryBrandproList({
    category: category.value,
    brand: brand.value,
  });
  res.data.forEach((item: any) => {
    dataList.value.push(item.banners[0]);
  });
  dataList.value.forEach((item, index) => {
    let ImgObj = new Image() as any;
    ImgObj.src = item;
    if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
      return true;
    } else {
      dataList.value[index] = res1.data[index].img;
    }
  });
  console.log(res);
});
</script>

<style scoped lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  height: 500px;

  .swipimg {
    width: 100%;
    height: 100%;
  }
}

.van-pull-refresh {
  overflow: inherit;

  .van-pull-refresh__track {
    .goods-list {
      width: 100%;

      .goods-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
        margin: 10px;
        border-radius: 10px;
        margin: 8px 0;
        overflow: hidden;

        .van-cell {
          width: 48%;
          margin-top: 10px;
        }

        p {
          color: rgb(192, 65, 65);
        }

        .item-imgbox {
          width: 100%;

          img {
            display: block;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
